<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM操作</title>
    <style>
    
    
    </style>

</head>
<body>
    <input type="text" id="username1" name="uname" class="cname">
    <input type="text" id="username2" name="uname" class="cname">
    <input type="password" id="username3" name="uname" class="cname">
    
    <script>
        //1.根据id属性的值来返回标签对象 -  id是唯一的 - 返回也是唯一的
        var input = document.getElementById("username1");
        //1-1. 日志控制 - 简单的程序调试
        console.log(input.name);

        //2. 根据元素的name属性的名称进行获取,但是由于name属性的值是允许重复的
        // 所以返回的是一个数组对象
        var inputs = document.getElementsByName("uname");
        //alert(inputs.length);

        // 获取第二个 的id属性的值
        //alert(inputs[1].id);//username2

        //3. genju

    </script>

</body>
</html>